<!--
 @description  软体核心指标统计
 @fileName CoreData.vue
 @author maliang
 @created 2021/12/06 11:23:00
-->
<template>
  <div>
    <div class="core-box">
      <div v-for="(item, index) in coreList" :key="index" :class="index===2?'core-items': 'core-item'">
        <div :class="item.data.inventoryProportion ? 'c-title' : 'c-titleS'">
          <span>{{ item.title
          }}<span v-if="item.unit">({{ item.unit }})</span></span>
          <div
            v-if="item.data.inventoryProportion"
            style="margin-left: 15%"
            :class="item.colorClass"
          >
            <span>{{ (item.data.inventoryProportion * 100).toFixed(2) }}%</span>
          </div>
        </div>

        <div
          v-if="item.title !== '立体仓'"
          class="today"
          @click="showDialogHandle(item.title)"
        >
          库存
          <span :class="item.colorClass">{{
            item.data.inventoryPieceNum | filterForamtThousand
          }}</span>
        </div>
        <div
          v-if="item.title !== '立体仓'"
          class="month"
          @click="showDialogHandle(item.title)"
        >
          <span>入库<span :class="item.colorClass">{{
            item.data.inWarehousePieceNum | filterForamtThousand
          }}</span></span>
          <span>出库<span :class="item.colorClass">{{
            item.data.outWarehousePieceNum | filterForamtThousand
          }}</span></span>
        </div>

        <div
          v-if="item.title === '立体仓'"
          style="text-align: center; font-size: 12px; margin-top: -12px"
          @click="showDialogHandle(item.title)"
        >
          <div>
            库存(件)
            <div>
              <span
                :class="item.colorClass"
                style="font-size: 12px;font-weight: 600;"
              >{{ A31.inventoryPieceNum | filterForamtThousand }}--{{
                (A31.inventoryProportion * 100).toFixed(2)
              }}%</span>
            </div>
          </div>
          <div>
            库存(托盘)
            <div>
              <span
                :class="item.colorClass"
                style="font-size: 12px;font-weight: 600;"
              >{{ A11.inventoryPieceNum | filterForamtThousand }}--{{
                (A11.inventoryProportion * 100).toFixed(2)
              }}%</span>
            </div>
          </div>
        </div>
        <div
          v-if="item.title === '立体仓'"
          class="month"
          @click="showDialogHandle(item.title)"
        >
          <span>入库(件)<span :class="item.colorClass">{{
            item.data.inWarehousePieceNum | filterForamtThousand
          }}</span></span>
          <span>出库(件)<span :class="item.colorClass">{{
            item.data.outWarehousePieceNum | filterForamtThousand
          }}</span></span>
        </div>
      </div>
    </div>
    <div class="core-update-time">统计截止时间: {{ staticDate }}</div>
    <!-- <van-popup
      v-model="showDialog"
      round
      closeable
      class="custom-van-pop"
      style="width:82%"
    >
      <software-dialog
        v-if="showDialog"
        :type-name="typeName"
        :core-date="coreDate"
      />
    </van-popup> -->
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { getStorageInterface, getStateCutTime } from '@/apis/storage'
// import SoftwareDialog from './SoftwareDialog'
import showDateMixin from '@/mixins/showCoreTime'
export default {
  name: 'SoftwareCoreData',
  //   components: { SoftwareDialog },
  mixins: [showDateMixin],
  props: {
    coreDate: {
      type: String,
      default: parseTime(new Date(), '{y}.{m}.{d}')
    }
  },
  data() {
    return {
      showDialog: false,
      typeName: '',
      coreList: [
        {
          title: '羊马',
          unit: '件',
          icon: require('../../../assets/image/pro_type_banshi.png'),
          data: {
            inWarehousePieceNum: '-',
            inventoryPieceNum: '-',
            outWarehousePieceNum: '-',
            inventoryProportion: '-'
          },
          colorClass: 'color-yellow'
        },
        {
          title: '工业园',
          unit: '件',
          icon: require('../../../assets/image/wood_fugui.png'),
          data: {
            inWarehousePieceNum: '-',
            inventoryPieceNum: '-',
            outWarehousePieceNum: '-',
            inventoryProportion: '-'
          },
          colorClass: 'color-blue'
        },
        {
          title: '立体仓',
          unit: '',
          icon: require('../../../assets/image/wood_zizhi.png'),
          data: {
            inWarehousePieceNum: '-',
            inventoryPieceNum: '-',
            outWarehousePieceNum: '-'
          },
          colorClass: 'color-green'
        },
        {
          title: '床垫',
          unit: '件',
          icon: require('../../../assets/image/wood_shimu.png'),
          data: {
            inWarehousePieceNum: '-',
            inventoryPieceNum: '-',
            outWarehousePieceNum: '-',
            inventoryProportion: '-'
          },
          colorClass: 'color-yellow'
        },
        {
          title: '定制衣柜',
          unit: '件',
          icon: require('../../../assets/image/wood_fuguishimu.png'),
          data: {
            inWarehousePieceNum: '-',
            inventoryPieceNum: '-',
            outWarehousePieceNum: '-'
          },
          colorClass: 'color-blue'
        },
        {
          title: '定制橱柜',
          unit: '件',
          icon: require('../../../assets/image/wood_zhuoyi.png'),
          data: {
            inWarehousePieceNum: '-',
            inventoryPieceNum: '-',
            outWarehousePieceNum: '-'
          },
          colorClass: 'color-green'
        }
      ],
      staticDate: null,
      A11: [], // 托盘
      A31: [] // 件
    }
  },
  watch: {
    coreDate: {
      handler() {
        this.getStorageInterface()
      },
      immediate: true
    }
  },
  created() {
    this.getStateCutTime()
  },
  methods: {
    getStateCutTime() {
      getStateCutTime().then((res) => {
        this.staticDate = res.data
      })
    },
    showDialogHandle(name) {
      this.typeName = name
      this.showDialog = true
    },
    async getStorageInterface() {
      // 核心指标
      getStorageInterface({
        date: this.coreDate
      }).then((res) => {
        if (res.data) {
          this.coreList.forEach((item) => {
            item.data = res.data[item.title]
              ? res.data[item.title]
              : {
                inWarehousePieceNum: '-',
                inventoryPieceNum: '-',
                outWarehousePieceNum: '-'
              }
          })
          this.A11 = res.data.A11
          this.A31 = res.data.A31
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.core-box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
  &::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: 1px;
    background: #f5f6f7;
  }
  &::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 1px;
    background: #f5f6f7;
  }
  .core-item {
    position: relative;
    width: 50%;
    height: 108px;
    padding: 15px 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #f5f6f7;
    box-sizing: border-box;
    letter-spacing: 1px;
    color: #888;
    font-size: 12px;
    &::after {
      content: "";
      position: absolute;
      right: 0;
      top: 15px;
      bottom: 15px;
      width: 1px;
      background: #f5f6f7;
    }
    &:last-child {
      &::after {
        display: none;
      }
    }
    &.half_item {
      width: 50%;
    }
    &.no-br {
      &::after {
        display: none;
      }
    }
    .today {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 24px;
      line-height: 24px;
      margin-bottom: 10px;
      span {
        margin-left: 2px;
        font-size: 20px;
        font-family: "PFZH";
      }
    }
    .month {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 16px;
      font-size: 10px;
      white-space: nowrap;
      letter-spacing: 0;
      div:last-child {
        margin-left: 5px;
      }
      span {
        margin-left: 1px;
      }
    }
  }
  .core-items {
    position: relative;
    width: 50%;
    height: 108px;
    // padding: 15px 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #f5f6f7;
    box-sizing: border-box;
    letter-spacing: 1px;
    color: #888;
    font-size: 12px;
    &::after {
      content: "";
      position: absolute;
      right: 0;
      top: 15px;
      bottom: 15px;
      width: 1px;
      background: #f5f6f7;
    }
    &:last-child {
      &::after {
        display: none;
      }
    }
    &.half_item {
      width: 50%;
    }
    &.no-br {
      &::after {
        display: none;
      }
    }
    .today {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 24px;
      line-height: 24px;
      margin-bottom: 10px;
      span {
        margin-left: 2px;
        font-size: 20px;
        font-family: "PFZH";
      }
    }
    .month {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 16px;
      font-size: 10px;
      white-space: nowrap;
      letter-spacing: 0;
      div:last-child {
        margin-left: 5px;
      }
      span {
        margin-left: 1px;
      }
    }
  }
}

.c-title {
  height: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
  color: #999;
  font-size: 12px;
  font-family: "PFZH";
  white-space: nowrap;
  margin-right: 5px;
  .icon {
    margin-right: 5px;
    width: 18px;
    height: auto;
  }
}

.c-titleS {
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  color: #999;
  font-size: 12px;
  font-family: "PFZH";
  white-space: nowrap;
  .icon {
    margin-right: 5px;
    width: 18px;
    height: auto;
  }
}

.core-update-time {
  // border-top:1px solid #F5F6F7;
  padding-top: 10px;
  line-height: 18px;
  text-align: center;
  color: #999999;
  letter-spacing: 1px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
